<template>
  <div class="newsCenter__Waybill" :class="isFirstRequest ? 'first__request' : ''">
    <common-pull-down-up
      v-model:pullOptions="pullOptions"
      :pageOptions="queryModel"
      :title="'报警消息'"
      @loadData="loadData"
      @pullDownRefresh="pullDownRefresh"
    >
      <template #content>
        <div class="news__item" v-for="item in pullOptions.rows" :key="item.id">
          <div class="time">{{ moment(item.sysNoticeEntity.createTime).fromNow() }}</div>
          <div class="card">
            <div class="top">
              <div class="area">【{{ item.sysNoticeEntity.title }}】</div>
              <!-- <div class="detail">
                <span>查看详情</span>
                <van-icon name="arrow" />
              </div> -->
            </div>
            <div class="memo">{{ item.sysNoticeEntity.content }}</div>
          </div>
        </div>
      </template>
      <template #noMore>
        <img src="@/assets/image/newsCenter/no-news.png" v-if="!isFirstRequest" />
        <div v-else></div>
      </template>
      <template #noMoreText>
        <div v-if="isFirstRequest">正在加载</div>
      </template>
    </common-pull-down-up>
    <van-overlay class="loading-area" :show="isFirstRequest">
      <van-loading />
    </van-overlay>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent, ref } from 'vue'
import CommonPullDnUp from '@/components/CommonPullDnUp.vue'
import { NoticeModel } from '@/store/newsCenter/types'
import { PullOptions } from '@/store/baseTypes'
import store from '@/store/index'
import { Overlay, Loading } from 'vant'
import { handleGetNotice as handleNotice } from '../common'
import moment from 'moment'
moment.locale('zh-cn')

export default defineComponent({
  name: 'NewsCenterSystem',
  components: {
    'common-pull-down-up': CommonPullDnUp,
    'van-overlay': Overlay,
    'van-loading': Loading
  },

  // 只注重主流程的执行，不同业务的函数拆分出去，业务逻辑清晰明了
  setup() {
    const pullOptions = reactive<PullOptions<NoticeModel>>({
      rows: [],
      loading: false,
      finished: false,
      refreshing: false,
      noData: true,
      finishedText: '没有更多数据~~~',
      totalRows: 0,
      totalPage: 0
    })

    const queryModel = reactive({
      isWarning: true,
      isShow: true,
      noticeType: 5,
      pageSize: 20,
      pageNo: 1
    })

    const isFirstRequest = ref<boolean>(true)

    /** 事件区域 */

    // 将所有运单消息标记成已读
    const handleMsgReading = async (): Promise<void> => {
      await store.dispatch('newsCenter/handleSysNoticeReadingByType', {
        type: 1,
        isWarning: true,
        isShow: true,
        noticeType: 5
      })
    }

    const handleGetNotice = async (): Promise<void> => {
      if (isFirstRequest.value === true) {
        await handleMsgReading()
        handleNotice()
      }
      const result = await store.dispatch('newsCenter/handleGetNotice', queryModel)
      isFirstRequest.value = false
      if (result) {
        if (pullOptions.refreshing) {
          // 如果是刷新
          pullOptions.rows = []
          pullOptions.refreshing = false
        }
        pullOptions.rows = pullOptions.rows.concat(result.rows)
        pullOptions.loading = false
        const { pageSize, pageNo } = queryModel
        if (pageSize * pageNo >= result.totalRows) {
          pullOptions.finished = true
        } else {
          queryModel.pageNo += 1
        }

        if (pullOptions.rows.length < 1) {
          pullOptions.noData = true
        } else {
          pullOptions.noData = false
        }
      }
    }

    const loadData = async (): Promise<void> => {
      handleGetNotice()
    }

    const pullDownRefresh = async () => {
      // 清空列表数据
      queryModel.pageNo = 1
      pullOptions.finished = false
      pullOptions.loading = true
    }

    const handleGoDetail = (): void => {
      //
    }

    return {
      pullOptions,
      loadData,
      queryModel,
      pullDownRefresh,
      handleGoDetail,
      moment,
      isFirstRequest
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/mixins.scss';
@import '@/style/mixins.scss';
.newsCenter__Waybill {
  width: 100%;
  height: 100%;
  .news__item {
    .time {
      padding: 0 10px;
      width: fit-content;
      height: 20px;
      text-align: center;
      line-height: 20px;
      background: #dbdbe0;
      margin: 20px auto 10px auto;
      color: white;
      font-size: 12px;
      border-radius: 10px;
    }
    .card {
      width: 100%;
      box-shadow: 0px 6px 14px 0px rgba(221, 221, 221, 0.15);
      border-radius: 10px;
      padding: 12px 12px 20px 12px;
      box-sizing: border-box;
      margin-bottom: 10px;
      background: white;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 13px;
        border-bottom: unset;
        position: relative;
        &::after {
          @include px-1;
        }
        .area {
          font-size: 14px;
          font-weight: 400;
          color: #101736;
          // background: url('~@/assets/image/newsCenter/position.png') left -2.5px no-repeat;
          background-size: 20px;
          // text-indent: 24px;
          @include ellipsis;
        }
        .detail {
          font-size: 14px;
          font-weight: 400;
          color: #9fa2af;
        }
      }
      .memo {
        font-size: 12px;
        padding-top: 20px;
        font-weight: 400;
        color: #575c72;
        line-height: 17px;
      }
    }
  }
  .loading-area {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0);
  }
}
</style>
<style lang="scss">
.first__request {
  .van-list__loading {
    display: none !important;
  }
}
</style>
